<div id="content-container" class="container" style="margin-top: 50px;">
    <style>
        .list_one{
            padding: 10px;
            border-bottom: 1px dashed #e3e3e3;
            margin-bottom: 18px;
            position: relative;
            display: flex;
            justify-content: space-between;
        }
        .list_one .title {
            font-weight: bold;
            color: #fff;
            font-size: 18px;
        }
        .show_btn{
            background: #7a7a7a;
            color: #fff;
            padding: 3px 16px;
            margin-bottom: 8px;
            border-radius: 18px;
            cursor: pointer;
        }
        .show_btn a{
            color: #fff;
        }
        .tool_tips{
            display: none;
            width: 320px;
            background-color: #ffffff;
            color: #000000;
            border-radius: 5px;
            padding: 19px 23px;
            position: absolute;
            z-index: 99999;
            bottom: 110%;
            left: 20%;
            margin-left: -60px;
        }
        .tool_tips::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 30%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #ffffff transparent transparent transparent;
        }
        .tool_tips .tool_tit{
           margin-right: 10px;
            text-align: left;
            display: inline-block;
        }
        .tool_tips .tool_info{
            color: #565656;
        }
        .bianhao{
            display: flex;
            align-items: center;
            font-size: 16px;
        }
        .bianhao .status{
            margin-left: 16px;
            padding: 2px 12px;
            background-color: #444c69;
            color: #fff;
            border-radius: 12px;
            font-size: 12px;
        }
        .bianhao .status2 {
            margin-left: 16px;
            padding: 2px 12px;
            background-color: #646464;
            color: #fff;
            border-radius: 12px;
            font-size: 12px;
        }
        main.content{
            overflow: visible !important;
        }
        .cancle_yuye{
            display: inline-block;
            margin-left: 15px;
            padding: 0px 6px;
            background-color: orange;
            border-radius: 12px;
            color: #fff;
            font-size: 12px;
            cursor: pointer;
        }
        .lanmu_tips{
            font-size: 12px;
            margin-left: 15px;
            color: red;
        }
        .layui-layer-content{
            color: #000 !important;
        }
    </style>
    <script src="/assets/libs/fastadmin-layer/src/layer.js"></script>
    <div class="row">
        <div class="col-md-3">
            {include file="common/sidenav" /}
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">

                    <h2 class="page-header">{:__('Bookings')} <span class="lanmu_tips">{$shop_tips}</span></h2>

                    <div class="row user-baseinfo">
                        <div class="col-xs-12 col-md-12">
                            {volist name='recordData' id='pack'}
                            <div class="list_one">
                                <div class="left">
                                    <div class="bianhao">
                                        <div>{$pack.bianhao}</div>
                                        {if $pack.status eq 1}
                                        <div class="status">{:__('yuyue_shenqian')}</div>
                                        {/if}
                                        {if $pack.status eq 2}
                                        <div class="status">{:__('yuyue_success')}</div>
                                        {/if}
                                        {if $pack.status eq -1}
                                        <div class="status2">{:__('yuyue_cancle')}</div>
                                        {/if}
                                        {if $pack.status eq -2}
                                        <div class="status2">{:__('yuyue_jujue')}</div>
                                        {/if}
                                    </div>
                                    <div class="title">{$pack.subject.name } / {$pack.teacher.name}{$pack.team_teacher} / {$pack.jiaoshi_name}</div>
                                    {if $pack.is_qiandao == 1}
                                    <div style="color: #7a7a7a">{$pack.today} {$pack.start_time} ~ {$pack.end_time} {$pack.weekDay} / {:__('Signed in')}
                                        {if $pack.can_cancle eq 1}
                                        <span class="cancle_yuye" onclick="cancleRecord({$pack.id})">{:__('quxiao_yuye')}</span>
                                        {/if}
                                    </div>
                                    {/if}

                                    {if $pack.is_qiandao == -1}
                                    <div style="color: #7a7a7a">{$pack.today} {$pack.start_time} ~ {$pack.end_time} {$pack.weekDay} / {:__('Not checked in')}
                                        {if $pack.can_cancle eq 1}
                                        <span class="cancle_yuye" onclick="cancleRecord({$pack.id})">{:__('quxiao_yuye')}</span>
                                        {/if}
                                    </div>
                                    {/if}
                                    <div class="tool_tips">
                                        <div>
                                            <span class="tool_tit">{:__('yuyue_time')}：</span><span class="tool_info">{$pack.create_time}</span>
                                        </div>
                                        <div>
                                            <span class="tool_tit">{:__('yuyue_type')}：</span>
                                            {if $pack.yuyue_type eq 1}
                                            <span class="tool_info">{:__('yuyue_type_my')}</span>
                                            {/if}
                                            {if $pack.yuyue_type eq 2}
                                            <span class="tool_info">{:__('yuyue_type_qiantai')}</span>
                                            {/if}
                                        </div>
                                        {if $pack.yuyue_type eq 2}
                                        <div>
                                            <span class="tool_tit">{:__('Experience Roll')}：</span><span class="tool_info">{$pack.juan_bianhao}</span>
                                        </div>
                                        {/if}
                                        <div>
                                            <span class="tool_tit">{:__('riqi')}：</span><span class="tool_info">{$pack.today} {$pack.weekDay}</span>
                                        </div>
                                        <div>
                                            <span class="tool_tit">{:__('time')}：</span><span class="tool_info">{$pack.start_time} ~ {$pack.end_time}</span>
                                        </div>
                                        <div>
                                            <span class="tool_tit">{:__('yuyue_yuyuestatus')}：</span>
                                            {if $pack.status eq 1}
                                            <span class="tool_info">{:__('yuyue_shenqian')}</span>
                                            {/if}
                                            {if $pack.status eq 2}
                                            <span class="tool_info">{:__('yuyue_success')}</span>
                                            {/if}
                                            {if $pack.status eq -1}
                                            <span class="tool_info">{:__('yuyue_cancle')}</span>
                                            {/if}
                                            {if $pack.status eq -2}
                                            <span class="tool_info">{:__('yuyue_jujue')}</span>
                                            {/if}
                                        </div>

                                        <div>
                                            <span class="tool_tit">{:__('yuyue_is_qiandao')}：</span>
                                            {if $pack.is_qiandao eq 1}
                                            <span class="tool_info"> {:__('Signed in')}</span>
                                            {/if}
                                            {if $pack.is_qiandao eq -1}
                                            <span class="tool_info"> {:__('Not checked in')}</span>
                                            {/if}
                                        </div>
                                        <div>
                                            <span class="tool_tit">{:__('yuyue_qiandao_time')}：</span>
                                            <span class="tool_info"> {$pack.qiandao_time}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="right">
                                    <div class="show_btn show_yuyue">{:__('show_detail')}</div>
                                    <div class="show_btn"><a href="/index/index/schedule.html">{:__('yuyue_ke')}</a></div>
                                </div>

                            </div>
                            {/volist}

                            {empty name="recordData"}
                            <div>{:__('No Record')}</div>
                            {/empty}
                        </div>

                    </div>

                </div>
                <script>
                    $(".show_yuyue").mousemove(function (){
                        $('.tool_tips').hide()
                        $(this).closest('.list_one').find('.tool_tips').show();
                    })
                    $(".show_yuyue").mouseout(function (){
                        $(this).closest('.list_one').find('.tool_tips').hide();
                    })
                    function cancleRecord(id){
                        var  url = "{:url('api/uinfo/cancleRecord')}?id="+id;

                        layer.confirm("{:__('sure_action')}", {
                            btn: ['Yes', 'No'] //按钮
                        }, function(index, layero){
                            $.get(url,function (res){
                                if(res.code == 1){
                                    layer.close(index); //关闭确认框
                                    window.location.reload();
                                }else{
                                    Layer.msg(res.msg);
                                }
                            })
                        }, function(index){
                            //取消按钮回调
                        });


                    }
                </script>
            </div>
        </div>
    </div>
</div>
